The ais-search-box widget lets users perform a text-based query. TThe search box is usually the main entry point to start the search on an InstantSearch page. It’s usually placed at the top of a search experience, so users can start searching right away. 
<ais-search-box
    // Optional parameters
    placeholder,
    autofocus,
    ignore-composition-events,
    submit-title,
    reset-title,
    show-loading-indicator,
    class-names
/>

​
Import

Import ais-configure as a component or with a plugin. 
import { AisSearchBox } from 'vue-instantsearch';
// Use 'vue-instantsearch/vue3/es' for Vue 3

export default {
components: {
    AisSearchBox
},
// ...
};
To ensure your code is correctly bundled, see Optimize build size.

​
Props

​
placeholder
string
The placeholder text of the input.
<ais-search-box placeholder="Search for products..." />
​
autofocus
boolean
default:"true"
Whether to automatically focus on the input when rendered.
<ais-search-box autofocus />
​
ignore-composition-events
boolean
default:"false"
Whether to update the search state in the middle of a composition session. This is useful when users need to search using non-Latin characters.
<ais-search-box ignore-composition-events />
Available from v4.13.6.
​
submit-title
string
default:"search"
The submit button text.
<ais-search-box submit-title="Submit the query" />
​
reset-title
string
default:"clear"
The clear button text.
<ais-search-box reset-title="Remove the query" />
​
show-loading-indicator
boolean
default:"false"
Whether to show the loading indicator (replaces the submit button if the search is stalled).
<ais-search-box show-loading-indicator />
​
class-names
boolean
default:"{}"
The CSS classes you can override:
  • ais-SearchBox: the root element of the widget.
  • ais-SearchBox-form: the form element.
  • ais-SearchBox-input: the input element.
  • ais-SearchBox-submit: the submit button element.
  • ais-SearchBox-submitIcon: Magnifier icon used with the search input.
  • ais-SearchBox-reset: the reset button element.
  • ais-SearchBox-resetIcon: the reset button icon.
  • ais-SearchBox-loadingIndicator: the loading indicator element.
  • ais-SearchBox-loadingIcon: the loading indicator icon.
<ais-search-box
    :class-names="{
        'ais-SearchBox': 'MySearchBox',
        'ais-SearchBox-form': 'MySearchBoxForm',
        // ...
    }"
/>

​
HTML output

HTML
<div class="ais-SearchBox">
<form class="ais-SearchBox-form" novalidate>
    <input class="ais-SearchBox-input" autocomplete="off" autocorrect="off" autocapitalize="off" placeholder="Search for products" spellcheck="false" maxlength="512" type="search" value="" />
    <button class="ais-SearchBox-submit" type="submit" title="Submit the search query.">
    <svg class="ais-SearchBox-submitIcon" xmlns="http://www.w3.org/2000/svg" width="10" height="10" viewBox="0 0 40 40">
        ...
    </svg>
    </button>
    <button class="ais-SearchBox-reset" type="reset" title="Clear the search query." hidden>
    <svg class="ais-SearchBox-resetIcon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" width="10" height="10">
        ...
    </svg>
    </button>
    <span class="ais-SearchBox-loadingIndicator" hidden>
    <svg width="16" height="16" viewBox="0 0 38 38" xmlns="http://www.w3.org/2000/svg" stroke="#444" class="ais-SearchBox-loadingIcon">
        ...
    </svg>
    </span>
</form>
</div>

​
Customize the UI

​
Slots

​
default
Use the default slot to override the DOM output. When you implement this slot, none of the other slots will change the output, as the default slot surrounds them.
<ais-search-box>
<template v-slot="{ currentRefinement, isSearchStalled, refine }">
    <input
    type="search"
    :value="currentRefinement"
    @input="refine($event.currentTarget.value)"
    >
    <span :hidden="!isSearchStalled">Loading...</span>
</template>
</ais-search-box>

​
Scopes

  • currentRefinement: string: the current query used for the search.
  • isSearchStalled: boolean: whether InstantSearch has detected that searches are stalled.
  • refine: (string) => void: the function to change the query.
​
submit-icon
The slot to override the DOM output of the submit icon.
<ais-search-box>
    <template v-slot:submit-icon>🔎</template>
</ais-search-box>
​
reset-icon
The slot to override the DOM output of the reset icon.
<ais-search-box>
    <template v-slot:reset-icon>🚫</template>
</ais-search-box>
​
loading-indicator
The slot to override the DOM output of the loading indicator.
<ais-search-box>
    <template v-slot:loading-indicator>⏳</template>
</ais-search-box>